<template>
  <KView class="release-circle">
    <page-header title="发布动态" @back-click="toBack"></page-header>
    <template v-if="isShow">
      <KView class="release-circle-content">
        <KView class="release-circle-tag">
          <sys-select-picker clearable v-model="releaseData.typeTag" label="动态类型" :label-width="140" :options="typeList" placeholder="在此选择动态类型">
          </sys-select-picker>
        </KView>
        <KView class="release-circle-data">
          <sys-textarea show-word-limit v-model="releaseData.content" :maxlength="200" placeholder="在此输入你想说的话"></sys-textarea>
        </KView>
        <KView class="release-circle-upload">
          <KView class="release-circle-upload-type-div clearfix">
            <KView class="release-circle-upload-type">上传类型:</KView>
            <sys-checkbox :value="releaseData.uploadType==='pic'" :has-change="false" @click="typeChange('pic')">图片</sys-checkbox>
            <sys-checkbox :value="releaseData.uploadType==='video'" :has-change="false" @click="typeChange('video')">视频</sys-checkbox>
          </KView>
          <KView class="release-circle-upload-data">
            <imgs-upload v-if="releaseData.uploadType==='pic'" ref="imgsUpload" v-model="releaseData.pics" prefix-name="sysCirclePic" :limit="9">
            </imgs-upload>
            <KView v-else class="release-circle-video-upload">
              <video-upload v-model="releaseData.video" prefix-name="sysCircleVideo" :loading.sync="videoLoading"></video-upload>
            </KView>
          </KView>
        </KView>
        <KView class="release-circle-theme">
          <KView class="release-circle-theme-title">选择主题</KView>
          <KView class="release-circle-theme-line"></KView>
          <KView class="release-circle-theme-select clearfix">
            <KView class="theme-select-item clearfix" :class="{'item-select':releaseData.themeData===theme}" v-for="theme in themeList"
              :key="theme.id" :style="{color:theme.color}" @click="themeChange(theme)">
              <KView>#</KView>
              <KView class="ellipsis" style="max-width:5em">{{theme.text}}</KView>
              <KView>#</KView>
            </KView>
            <KView class="theme-select-item clearfix" :class="{'item-select':releaseData.themeData==='default'}" @click="themeChange()">
              <KView>自定义</KView>
            </KView>
          </KView>
          <KView v-if="releaseData.themeData==='default'" class="release-circle-theme-input">
            <sys-textarea nowarp show-word-limit v-model="releaseData.themeText" :maxlength="20" placeholder="在此输入你要自定义的主题"></sys-textarea>
          </KView>
        </KView>
      </KView>
      <KView class="release-circle-btn" @click="ensure">发布</KView>
    </template>
  </KView>
</template>

<script>
  import PageHeader from 'common/pageHeader';
  import SysTextarea from 'common/sysTextarea';
  import SysCheckbox from 'common/sysCheckbox';
  import ImgsUpload from 'common/imgsUpload';
  import SysSelectPicker from 'common/sysSelectPicker';
  import VideoUpload from 'common/videosUpload/videosUploadItem';

  import ReleaseCircle from 'models/sysCircle/releaseCircle';

  import storeMixins from 'mixins/storeMixins';
  import SystemUtil from 'utils/systemUtil';
  import SysCircleApi from 'services/sysCircleApi';

  export default {
    mixins: [storeMixins],

    data() {
      return {
        isShow: false,
        videoLoading: false,
        isMiniprogram: process.env.isMiniprogram,
        releaseData: null,
        themeList: [],
        typeList: ['种草', '上新', '严选', '推荐', '爆款']
      };
    },

    created() {
      SystemUtil.showLoading();
      this.setThemeList().then(() => {
        this.releaseData = new ReleaseCircle(this.location);
        this.isShow = true;
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setThemeList() {
        return SysCircleApi.getThemeData(10).then(themeList => {
          this.themeList = themeList;
          return themeList;
        });
      },

      typeChange(type) {
        this.releaseData.uploadType = type;
      },

      themeChange(theme = null) {
        let releaseData = this.releaseData;
        if (theme === null) {
          releaseData.themeData = 'default';
        } else {
          releaseData.themeData = theme;
          releaseData.themeText = '';
        }
      },

      ensure() {
        let releaseData = this.releaseData;
        if (releaseData.uploadType === 'pic') {
          if (this.$refs['imgsUpload'].checkLoading()) {
            this.$api.showToast({
              title: '图片正在上传',
              icon: 'none'
            });
            return;
          }
        } else {
          if (this.videoLoading) {
            this.$api.showToast({
              title: '视频正在上传',
              icon: 'none'
            });
            return;
          }
        }

        let code = releaseData.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`sysCircle.releaseCircle.error.${code}`);
          this.$api.showToast({
            title: msg,
            icon: 'none'
          });
          return;
        }

        SystemUtil.showLoading('发布中...');
        SysCircleApi.releaseData(releaseData).then(() => {
          SystemUtil.hideLoading();
          this.$api.showToast({
            title: '发布成功',
            icon: 'success'
          });

          let pages = getCurrentPages();
          if (pages.length >= 2) {
            let page = pages[pages.length - 2];
            page.window.actionData = {
              type: 'releaseCircleSuccess',
              data: {}
            };
          }
          this.toBack();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      PageHeader,
      SysTextarea,
      SysCheckbox,
      ImgsUpload,
      SysSelectPicker,
      VideoUpload
    }
  };

</script>

<style lang="scss">
  .release-circle {
    height: 100%;

    .page-header {
      margin-bottom: formatPx(40);
    }

    .release-circle-content {
      height: calc(100% - #{formatPx(190)});
      padding: 0 formatPx(30);
      overflow: auto;

      .release-circle-data {
        margin-top: formatPx(30);
        height: formatPx(330);
        background: #f7f7f7;
        font-size: formatPx(26);
        padding: formatPx(30) formatPx(26);
      }

      .release-circle-upload {
        margin-top: formatPx(20);

        .release-circle-upload-type-div {
          height: formatPx(40);
          line-height: formatPx(40);
          font-size: formatPx(26);

          >div {
            float: left;
            height: 100%;
          }

          .release-circle-upload-type {
            margin-right: formatPx(14);
          }

          .sys-checkbox {
            width: formatPx(110);

            &+.sys-checkbox {
              margin-left: formatPx(26);
            }
          }
        }

        .release-circle-upload-data {
          margin-top: formatPx(20);

          .release-circle-video-upload {
            width: formatPx(220);
            height: formatPx(220);
          }
        }
      }

      .release-circle-theme {
        margin-top: formatPx(40);

        .release-circle-theme-title {
          border-left: formatPx(10) solid #59C264;
          font-size: formatPx(36);
          padding-left: formatPx(15);
          line-height: formatPx(40);
          height: formatPx(40);
        }

        .release-circle-theme-line {
          height: 1px;
          background: #DADADA;
          margin: formatPx(30) 0;
        }

        .release-circle-theme-select {
          margin-right: formatPx(-28);

          .theme-select-item {
            float: left;
            height: formatPx(60);
            line-height: formatPx(60);
            padding: 0 formatPx(26);
            border-radius: formatPx(10);
            border: 1px solid #dddddd;
            background: #f7f7f7;
            margin-right: formatPx(28);
            margin-bottom: formatPx(20);
            font-size: formatPx(26);

            >div {
              float: left;
              height: 100%;
            }

            &.item-select {
              background: #59c264;
              color: #ffffff !important;
            }
          }
        }

        .release-circle-theme-input {
          margin-top: formatPx(16);
          height: formatPx(150);
          background: #f7f7f7;
          font-size: formatPx(26);
          padding: formatPx(30) formatPx(26);
          margin-bottom: formatPx(40);
        }
      }
    }

    .release-circle-btn {
      height: formatPx(80);
      line-height: formatPx(80);
      margin: 0 formatPx(30);
      text-align: center;
      font-size: formatPx(28);
      color: #ffffff;
      background: #59c264;
      border-radius: formatPx(40);
    }
  }

</style>
